<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
<!--  <style>-->
<!--    .active {-->
<!--      background: green;-->
<!--    }-->
<!--    .text-danger {-->
<!--      background: red;-->
<!--    }-->
<!--    .static{-->
<!--      width: 100px;-->
<!--      height: 100px;-->
<!--    }-->
<!--  </style>-->
</head>
<!--
vue3样式绑定

vue.js class 与 style 是Html 元素的属性,用于设置元素的样式,可以用v-bind 来设置样式属性
v-bind 在处理class 和 style时 表达式除了可以使用字符串外还可以是对象和数组

v-bind: class 可以简写为 :class
class 属性绑定
可以为 v-bind:class 设置一个对象 从而动态切换 class
-->
<!--
vue3事件处理
我们可以使用 v-on指令来监听 DOM事件，从而执行js代码
v-on 指令可以缩写为 @符号
v-on：click=‘methodName’ 或 @click=‘methodName’

事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件
阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></form>
添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis">...</div>
只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat">...</div>
click 事件只能点击一次，2.1.4版本新增
<a v-on:click.once="doThis"></a>

-->
<!--
vue3表单
可以用 v-model 指令在表单 input,textarea,select 等元素上进行数据绑定双向绑定

v-model 会根据控件类型字段选取正确的方法来更新元素
v-model 会忽略所有表单元素的 value checked,selected属性的初始值,使用data选项中声明初始值
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件
text和textarea 元素使用value属性和input事件
checkbox 和 radio 使用 checked 属性 和change 事件
select 字段将value作为属性将change作为事件

在文本区域textarea 插值是不起作用 需要使用 v-model 来代替
<textarea>{{text}}</textarea>  错误
<textarea v-model="text"></textarea>  正确

-->

<body>
<!--复选框的双向数据绑定-->
<div id="app">
<!--  <p>单个复选框:</p>-->
<!--  <input type="checkbox" id="checkbox" v-model="checked">-->
<!--  <label for="checkbox">{{checked}}</label>-->

<!--  <p>多个复选框:</p>-->
<!--  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label>-->
<!--  <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label>-->
<!--  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label>-->
<!--  <br>-->
<!--  <span>选择的值为:{{checkedNames}}</span>-->

<!--  select下拉列表的双向数据绑定-->
<!--  <select v-model="selected" name="site">-->
<!--    <option value="">选择一个网站</option>-->
<!--    <option value="www.runoob.com">Runoob</option>-->
<!--    <option value="www.google.com">Google</option>-->
<!--  </select>-->
<!--  <div id="output">-->
<!--    选择的网站是 : {{selected}}-->
<!--  </div>-->

<!--  v-for循环输出选项-->
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>选择的是: {{ selected }}</span>
</div>

<script>
  const app = {
    data() {
      return {
        selected: 'www.runoob.com',
        options: [
          { text: 'Runoob', value: 'www.runoob.com' },
          { text: 'Google', value: 'www.google.com' },
          { text: 'Taobao', value: 'www.taobao.com' }
        ]
        // selected: ''
        // checked : false,
        // checkedNames: []
      }
    }
  }

  Vue.createApp(app).mount('#app')
</script>

<!--演示了input和textarea 元素中使用v-model实现双向数据绑定-->
<!--<div id="app">-->
<!--  <p>input 元素:</p>-->
<!--  <label>-->
<!--    <input v-model="message" placeholder="编辑我...">-->
<!--  </label>-->
<!--  <p>input表单消息是: {{message}}</p>-->

<!--  <p>textarea 元素:</p>-->
<!--  <label>-->
<!--    <textarea v-model="message2" placeholder="多行文本输入..."></textarea>-->
<!--  </label>-->
<!--  <p>textarea表单消息是: </p>-->
<!--  <p style="white-space: pre">{{message2}}</p>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        message:'',-->
<!--        message2:'菜鸟教程\r\nhttps://www.runoob.com'-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--事件处理程序中可以有多个方法这些方法由逗号运算符分隔-->
<!--<div id="app">-->
<!--  &lt;!&ndash; 这两个 one() 和 two() 将执行按钮点击事件 &ndash;&gt;-->
<!--  <button @click="one($event), two($event)">-->
<!--    点我-->
<!--  </button>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--    },-->
<!--    methods: {-->
<!--      one(event) {-->
<!--        alert("第一个事件处理器逻辑...")-->
<!--      },-->
<!--      two(event) {-->
<!--        alert("第二个事件处理器逻辑...")-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--除了直接绑定一个方法也可以使用内联的js 语句-->
<!--<div id="app">-->
<!--  <button @click="say('hi')">Say hi</button>-->
<!--  <button @click="say('what')">Say what</button>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->

<!--    },-->
<!--    methods: {-->
<!--      say(message) {-->
<!--        alert(message)-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--使用一个方法来调用js方法 v-on可以接收一个定义的方法来调用-->
<!--<div id="app">-->
<!--  &lt;!&ndash; `greet` 是在下面定义的方法名 &ndash;&gt;-->
<!--  <button @click="greet">点我</button>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        name: 'Runoob'-->
<!--      }-->
<!--    },-->
<!--    methods: {-->
<!--      greet(event) {-->
<!--        // `methods` 内部的 `this` 指向当前活动实例-->
<!--        alert('Hello ' + this.name + '!')-->
<!--        // `event` 是原生 DOM event-->
<!--        if (event) {-->
<!--          alert(event.target.tagName)-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--监听事件，当点击按钮被触发后进行监听-->
<!--<div id="app">-->
<!--  <button @click="counter++">增加1</button>-->
<!--  <p>这个按钮被点击了{{counter}} 次</p>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        counter: 0-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--组件绑定 -->
<!--<div id="app">-->
<!--&lt;!&ndash;  绑定组件的class属性为classC和classD&ndash;&gt;-->
<!--  <runoob class="classC classD"></runoob>-->
<!--</div>-->

<!--<script>-->
<!--  // 创建一个Vue 应用-->
<!--  const app = Vue.createApp({})-->

<!--  // 定义一个名为 runoob的新全局组件-->
<!--  app.component('runoob', {-->
<!--    template: '<h1 class="classA classB">I like runoob!</h1>'-->
<!--  })-->

<!--  app.mount('#app')-->
<!--</script>-->


<!--也可以直接绑定一个样式对象,让模板更清晰-->
<!--<div id="app">-->
<!--&lt;!&ndash;  将样式绑定到对象 baseStyles 设置多个样式&ndash;&gt;-->
<!--&lt;!&ndash;  当使用v-bind:style时需要特定的前缀的css属性时 如 transform ，Vue.js 会自动侦测并添加相应的前缀。-->
<!--可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：-->
<!--对这几个属性均设置为 display属性 但是这样写只会渲染数组中最后一个被浏览器支持的值,在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。-->
<!--<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>-->
<!--&ndash;&gt;-->
<!--  <div :style="[baseStyles, overridingStyles]">菜鸟教程</div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        // 对对象进行设置样式-->
<!--        baseStyles: {-->
<!--          color: 'green',-->
<!--          fontSize: '30px'-->
<!--        },-->
<!--        overridingStyles: {-->
<!--          'font-weight': 'bold'-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--使用内联样式直接设置样式 可以简写成 :style-->
<!--<div id="app">-->
<!--&lt;!&ndash;  直接设置样式&ndash;&gt;-->
<!--  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        activeColor: 'red',-->
<!--        fontSize: 30-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--使用三元表达式来切换列表中class-->
<!--<div id="app">-->
<!--&lt;!&ndash;  判断 isActive 为true时显示activeClass 否则显示errorClass&ndash;&gt;-->
<!--  <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        isActive: false,-->
<!--        activeClass: 'active',-->
<!--        errorClass: 'text-danger'-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->


<!--绑定一个数组用来传递class属性-->
<!--<div id="app">-->
<!--  <div class="static" :class="[activeClass, errorClass]"></div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        activeClass: 'active',-->
<!--        errorClass: 'text-danger'-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--绑定一个返回对象的计算属性-->
<!--<div id="app">-->
<!--  <div class="static" :class="classObject"></div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        isActive: true,-->
<!--        error: null-->
<!--      }-->
<!--    },-->
<!--    computed: {-->
<!--      classObject() {-->
<!--        return {-->
<!--          // 绑定一个返回对象 获取对象属性,-->
<!--          active: this.isActive && !this.error,-->
<!--          'text-danger': this.error && this.error.type === 'fatal'-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

<!--直接绑定一个classObject对象 -->
<!--<div id="app">-->
<!--  <div class="static" :class="classObject"></div>-->
<!--</div>-->

<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        classObject: {-->
<!--          'active': false,-->
<!--          'text-danger': true-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->


<!--v-bind:class 将isActive 设置为true显示一个绿色的div块,如果设置false则不显示-->
<!--:class指令也可以与普通的class属性共存,在对象中传入更多属性用来动态切换多个class-->
<!--<div id="app">-->
<!--&lt;!&ndash;  将div渲染为激活 在一个div上传递多个class属性进行绑定&ndash;&gt;-->
<!--  <div class="static" :class="{'active':isActive,'text-danger':hasError}"></div>-->
<!--</div>-->
<!--<script>-->
<!--  const app = {-->
<!--    data() {-->
<!--      return {-->
<!--        //  当isActive 或者 hasErro 变化时 class的值也会相应的变化-->
<!--        isActive: false , //是否激活-->
<!--        hasError: true-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app).mount('#app')-->
<!--</script>-->

</body>
</html>
